<template>
  <div class="main-con warehouseInfo">
    <!-- 搜索框 -->
    <div class="search-con">
      <div class="search-item">
        <div class="search-item-title">仓库编号</div>
        <div class="search-item-input">
          <el-input size="mini" v-model="formData.warehouseNo" placeholder="请输入仓库编号"></el-input>
        </div>
      </div>
      <div class="search-item">
        <div class="search-item-title">仓库名称</div>
        <div class="search-item-input">
          <el-input size="mini" v-model="formData.warehouseName" placeholder="请输入仓库名称" @change="handleSearch"></el-input>
        </div>
      </div>
      <div class="search-item">
        <div class="search-item-title"></div>
        <el-button size="mini" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button size="mini" type="primary" icon="el-icon-delete" @click="handleClear">清空</el-button>
      </div>
    </div>

    <!-- 按钮组 -->
    <div class="btn-group-con">
      <el-button size="mini" type="primary" @click="handleAdd">新增</el-button>
      <div class="btn-group-item">
        <el-upload class="upload-demo" action="" :before-upload="handleImport" :show-file-list="false">
          <el-button size="mini" type="primary">导入</el-button>
        </el-upload>
      </div>
      <el-button size="mini" type="primary" @click="handleExport">导出</el-button>
      <el-button size="mini" type="primary" @click="downloadTemplate">模板下载</el-button>
    </div>

    <!-- 表格数据 -->
    <div class="table-con" v-loading="loading">
      <el-table :data="tableData" size="mini" :header-cell-style="{background:'#f8f8f8'}" style="width: 100%">
        <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="warehouseNo" label="仓库编号" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="warehouseName" label="仓库名称" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="deliveryRegion" label="配送区域" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="storeCount" label="门店数" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="productCount" label="商品数" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="typeDesc" label="类型" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="" align="center" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="操作" width="" align="center">
          <template slot-scope="scope">
            <div class="handleBtn">
              <span @click="handleUpdate(scope.$index, scope.row)">编辑</span>
              <span @click="handleDelete(scope.$index, scope.row)">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 表格分页 -->
    <div class="pagination-con">
      <m-pagination :currentPage="formData.pageNum" :pageSize="formData.pageSize" :total="total" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange">
      </m-pagination>
    </div>
  </div>
</template>

<script>
import {
    queryWarehouseInfo,
    importReport,
    deleteWarehouseInfo
} from "@/common/service/productManagement/warehouseInfo.js";
import mPagination from "@/components/m-pagination/m-pagination";
import { api } from "@/common/http/index.js";
export default {
    name: "warehouseInfo",
    data() {
        return {
            // 搜索条件
            formData: {
                type: 1,
                warehouseNo: "", //仓库编号
                warehouseName: "", //仓库名称
                pageNum: 1,
                pageSize: 10
            },
            //表格数据
            tableData: [],//表格信息
            total: null,//表格总条数
            loading: false//表格加载动画
        };
    },
    created() {
        //初始化表格数据
        this._queryWarehouseInfo();
    },
    methods: {
        /*----------------------------查询操作----------------------------*/
        //查询仓库信息表格数据
        _queryWarehouseInfo() {
            this.loading = true;
            queryWarehouseInfo(this.formData)
                .then(res => {
                    this.loading = false;
                    this.tableData = res.content;
                    this.total = res.totalElements;
                })
                .catch(err => {
                    this.loading = false;
                    this.$message.error(err.message);
                });
        },
        //页码切换
        handleCurrentChange(val) {
            this.formData.pageNum = val;
            this._queryWarehouseInfo();
        },
        //每页展示条数的切换
        handleSizeChange(val) {
            this.formData.pageSize = val;
            this._queryWarehouseInfo();
        },
        //点击查询
        handleSearch() {
            this.formData.pageNum = 1;
            this.formData.pageSize = 10;
            this._queryWarehouseInfo();
        },
        //点击清空
        handleClear() {
            this.formData = {
                type: 1,
                warehouseNo: "",
                warehouseName: "",
                pageNum: 1,
                pageSize: 10
            };
            this.$message({
                type: 'success',
                message: '清空成功!'
            });
            this._queryWarehouseInfo();
        },

        /*----------------------------添加操作----------------------------*/
        handleAdd(){
            this.$router.push({
                path: '/index/warehouseInfo/editWarehouseInfo',
                query: {
                    editType: 'add',
                    editText: '新增'
                }
            });
        },

        /*----------------------------编辑操作----------------------------*/
        handleUpdate(index,row){
            this.$router.push({
                path: '/index/warehouseInfo/editWarehouseInfo',
                query: {
                    editType: 'update',
                    editText: '编辑',
					editId: row.id
                }
            });
        },

        /*----------------------------导入操作----------------------------*/
        //点击导入
        handleImport(file) {
            this.$confirm("确定导入文件?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    this._importReport(file);
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        //执行导入文件
        _importReport(file) {
            importReport(file)
                .then(res => {
                    this.formData.pageNum = 1;
                    this.formData.pageSize = 10;
                    this._queryWarehouseInfo();
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        /*----------------------------导出操作----------------------------*/
        handleExport() {
            var obj = {
                warehouseNo: this.formData.warehouseNo,
                warehouseName: this.formData.warehouseName
            };
            this.UTILS.exportUtil(api.exportWarehouseInfo, obj);
        },

        /*----------------------------模板下载操作----------------------------*/
        downloadTemplate() {
            var obj = {};
            this.UTILS.exportUtil(api.exportWarehouseInfoTemplate, obj);
        },

        /*----------------------------删除操作----------------------------*/
        //点击删除
        handleDelete(index,row) {
            this.$confirm('您确定删除此仓库信息吗？', '删除仓库信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this._deleteWarehouseInfo(row);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //执行删除操作
        _deleteWarehouseInfo(row){
            var data = {
                warehouseId: row.id
            }
            deleteWarehouseInfo(data).then(res => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this._queryWarehouseInfo();
            }).catch(err => {
                this.$message.error(err.message);
            })
        }
    },
    components: {
        "m-pagination": mPagination
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>